<template>
  <div style="width: 100%">
    <div class="select-image-container" :style="layoutStyle">
      <div
        v-for="(dataImage, index) in imageLists"
        :key="index"
        :class="classThumbnailMultiple(dataImage.id, dataImage.disabled)"
      >
        <div @click="onSelectMultipleImage(dataImage)">
          <img
            :src="dataImage.src"
            :alt="dataImage.alt"
            :id="dataImage.id"
            :height="200"
            :width="200"
            class="select-image__img"
          />
          <h4>{{ dataImage.title }}</h4>
          <div class="alt-text">{{ dataImage.alt }}</div>
        </div>
      </div>
    </div>
    <van-row class="footer-btn">
      <van-button type="primary" @click="resetMultipleSelection">重置</van-button>
    </van-row>
  </div>
</template>
<script>
import { isEmpty } from "lodash";
export default {
  name: "iamgeSelect",
  props: {
    value: "",
    mode: {
      default: "edit", // 编辑模式和 edit， 展示模式 view
    },
    images: {
      type: Array,
      default: () => [],
    },
    direction: {
      type: String,
      default: "horizontal",
    },
  },
  computed: {
    isDesigner() {
      return this.$attrs._source === 'designer'
    },
    mixEditable() {
      return !(this.$attrs.readonly || this.$attrs.disabled) && this.mode === "edit"
    },
    imageLists() {
      return this.isDesigner ? this.dataImages : isEmpty(this.images) ? this.dataImages : this.images
    },
    isHorizontal() {
      return this.direction === "horizontal";
    },
    layoutStyle() {
      if (!this.isHorizontal) return { flexDirection: "column" };
    },
  },
  data() {
    return {
      dataImages: [
        {
          id: "1",
          src: "https://qcloudimg.tencent-cloud.cn/raw/478c35e469057b4d6352ccc14e00ebc5.png",
          title: "标题1",
          alt: "Alt Image 1",
        },
        {
          id: "2",
          src: "https://qcloudimg.tencent-cloud.cn/raw/478c35e469057b4d6352ccc14e00ebc5.png",
          title: "标题2",
          alt: "Alt Image 2",
        },
      ],
      selectedImages: [], // 已选择数据
      multipleSelected: [],
      isMultiple: true, // 是否支持多选，默认开启
    };
  },
  watch: {
    value: {
      immediate: true,
      deep: true,
      handler(val) {
        this.selectedImages = val ? val : [];
      },
    },
  },
  mounted() {
    this.setInitialSelection();
  },
  methods: {
    classThumbnailMultiple(id, isDisabled) {
      const rootClass = "select-image";
      const baseClass = `${rootClass}__thumbnail`;
      const baseMultipleClass = `${baseClass} is--multiple`;
      if (isDisabled) {
        return `${baseMultipleClass} ${baseClass}--disabled`;
      }
      if (this.isExistInArray(id)) {
        return `${baseMultipleClass} ${baseClass}--selected`;
      }
      return `${baseMultipleClass}`;
    },
    isExistInArray(id) {
      return this.multipleSelected.find((item) => {
        return id === item.id;
      });
    },
    removeFromMultipleSelected(id) {
      this.multipleSelected = this.multipleSelected.filter((item) => {
        return id !== item.id;
      });
    },
    resetMultipleSelection() {
      this.multipleSelected = [];
    },
    onSelectMultipleImage(objectImage) {
      if (!objectImage.disabled) {
        if (!this.isExistInArray(objectImage.id)) {
          this.multipleSelected.push(objectImage);
          this.$emit("input", this.multipleSelected);
        } else {
          this.removeFromMultipleSelected(objectImage.id);
          this.$emit("input", this.multipleSelected);
        }
      }
    },
    setInitialSelection() {
      if (this.selectedImages) {
        if (!this.isMultiple && this.selectedImages.length === 1) {
          this.singleSelected = Object.assign({}, this.selectedImages[0]);
        } else {
          this.multipleSelected = [].concat(this.selectedImages);
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.select-image-container {
  display: flex;
}
.select-image__thumbnail {
  cursor: pointer;
  width: 210px;
  height: auto;
  padding: 6px;
  border: 1px solid #dddddd;
  border-radius: 4px;
  margin: 10px 30px 0 0;
}
.select-image__thumbnail--selected {
  background: #0088cc;
}

.select-image__thumbnail--disabled {
  background: #b9b9b9;
  cursor: not-allowed;
}

.select-image__thumbnail--disabled > .select-image__img {
  opacity: 0.5;
}
.alt-text {
  font-size: 14px;
}
.footer-btn {
  display: flex;
  margin: 15px 0 0 20px;
}
</style>